<template>
	<view>
		<view class="starimgbox" v-if="images.length==0">
			<view class="uploadimg" @click="uploadimg()">
				<image src="../../static/xj.png"></image>
				<view>商品图片</view>
			</view>
		</view>
		<view class="imgbox" v-else>
			<view class="imglist" v-for="(item,index) in images" :key="index">
				<image :src="item.full_url" style="border-radius: 16rpx;"></image>
				<image class="closen" src="../../static/gb.png" @click="spliceimg(index)"></image>
			</view>
			<view class="imglist" @click="uploadimg()" style="border:2rpx dashed #999999,width:33%" v-if="images.length<6">
				<image style="width: 66rpx;height: 60rpx; margin: 50rpx 0 10rpx 0;" src="../../static/xj1.png">
				</image>
				<view>添加图片</view>
			</view>
		</view>
		<view class="frombox">
			<view class="fromitem">
				<view>商品名称</view>
				<input v-model="goods_name" placeholder="必填" />
			</view>
			<view class="fromitem">
				<view>商品分类</view>
				<picker :range="catelist" range-key="cate_name" @change="handlecate">
					{{catetitle==null?'请选择':catetitle}}
				</picker>
			</view>
			<view class="fromitem">
				<view>商品限购数量</view>
				<input v-model="purchase_num" type="number" placeholder="为0或不填写为不限购" />
			</view>
			<!-- <view class="fromitem" style="border: none;">
				<view>自编码</view>
				<input placeholder="为0请输入自编码" />
			</view> -->
			<view class="fromitem">
				<view>规格类型</view>
				<view class="radiobox">
					<view class="radioitem" v-for="(item,index) in speclist" :key="index"
						@click="handlespec(item,index)">
						<image v-if="spec_type==item.id" src="../../static/gou.png"></image>
						<image v-else src="../../static/yuan.png"></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 单规格 -->
		<view class="frombox" v-if="spec_type==10">
			<view class="fromitem">
				<view>商品价格</view>
				<input  type="number" v-model="goods_price" placeholder="请输入(元)" />
			</view>
			<view class="fromitem">
				<view>划线价</view>
				<input  type="number" v-model="line_price" placeholder="请输入(元)" />
			</view>
			<view class="fromitem">
				<view>商品重量</view>
				<input v-model="goods_weight" placeholder="请输入" />
			</view>
			<view class="fromitem" style="border: none;">
				<view>库存量</view>
				<input v-model="stock_total" type="number" placeholder="请输入" />
			</view>
			<view class="fromitem" style="border: none;">
				<view>商品标签</view>
				<input v-model="tags" placeholder="请输入(逗号分割)" />
			</view>
		</view>
		<!-- 多规格 -->
		
		<mangspec v-if="spec_type==20" @handlemang="handlemang">
			
		</mangspec>
		<view class="frombox">
			<view class="fromitem">
				<view>商品状态</view>
				<view class="radiobox">
					<view class="radioitem" v-for="(item,index) in radiolist" :key="index"
						@click="handlegoodstype(item,index)">
						<image v-if="status==item.id" src="../../static/gou.png"></image>
						<image v-else src="../../static/yuan.png"></image>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="fromitem">
				<view>是否赠送积分</view>
				<view class="radiobox">
					<view class="radioitem" v-for="(item,index) in orlist" :key="index"
						@click="handlescore(item,index)">
						<image v-if="is_points_gift==index" src="../../static/gou.png"></image>
						<image v-else src="../../static/yuan.png"></image>
						<view>{{item}}</view>
					</view>
				</view>
			</view>
			<view class="fromitem">
				<view>是否积分商品</view>
				<view class="radiobox">
					<view class="radioitem" v-for="(item,index) in orlist" :key="index"
						@click="handlejifen(item,index)">
						<image v-if="is_points_discount==index" src="../../static/gou.png"></image>
						<image v-else src="../../static/yuan.png"></image>
						<view>{{item}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="starimgbox" v-if="imglist.length==0">
			<view class="uploadimg" @click="uploadimg()">
				<image src="../../static/xj.png"></image>
				<view>商品图片</view>
			</view>
		</view>
		<view class="imgbox" v-else>
			<view class="imglist" v-for="(item,index) in imglist" :key="index">
				<image :src="item" style="border-radius: 16rpx;"></image>
				<image class="closen" src="../../static/gb.png" @click="contentspliceimg(index)"></image>
			</view>
			<view class="imglist" @click="contentuploadimg()" style="border:2rpx dashed #999999,width:33%" v-if="imglist.length<6">
				<image style="width: 66rpx;height: 60rpx; margin: 50rpx 0 10rpx 0;" src="../../static/xj1.png">
				</image>
				<view>添加详情图片</view>
			</view>
		</view> -->
		<view class="butbox" @click="submit()">
			提交
		</view>
		<view style="height: 10rpx;"></view>
		<!-- <view class="container"> -->
			<!-- <editorbox></editorbox> -->
			<!-- <editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady"></editor> -->
			<!-- <button type="warn" @tap="undo">撤销</button> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import editorbox from '../../components/editorbox.vue'
	import mangspec from '../../components/manyspec.vue'
	export default {
		components:{
			editorbox,mangspec
		},
		data() {
			return {
				catelist: [],
				category_id: null,//分类id
				catetitle: null, //分类
				radiolist: [{id:10,title:'上架'}, {id:20,title:'下架'}],
				speclist: [{id:10,title:'单规格'}, {id:20,title:'多规格'}],//10单规格 20多规格
				orlist: ['否', '是'],
				is_points_gift: 0, //是否赠送积分//0否 1是
				is_points_discount: 0, //是否积分商品
				placeholder: '开始输入...',
				imglist:[],
				images:[],//商品图片
				goods_name:'',
				purchase_num:'',
				goods_price:'',
				line_price:'',
				goods_weight:'',
				spec_type:'',//10单规格 20多规格
				status:10,//10=上架 20=下架
				tags:'',
				goods_type:2,
				stock_total:'',
				formData:{},
				specificationFilter:[],
			}
		},
		onShow() {
			this.getcategoods()
		},
		methods: {
			//选择商品分类
			handlecate(e) {
				this.category_id = this.catelist[e.detail.value].id
				this.catetitle = this.catelist[e.detail.value].cate_name
			},
			//选择商品上架状态
			handlegoodstype(item, index) {
				this.status = item.id
			},
			//是否送积分
			handlescore(item, index) {
				this.is_points_gift = index
			},
			//是否积分商品
			handlejifen(item, index) {
				this.is_points_discount = index
			},
			//选择商品规格类型
			handlespec(item,index){
				this.spec_type = item.id
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},
			//添加图片
			uploadimg() {
				this.$uploads(1).then(res => {
					this.images.push(...res)
					console.log(this.images, 'this.images', res) //item.file.full_url
				})
			},
			//添加详情图片
			contentuploadimg() {
				this.$upload(1).then(res => {
					this.imglist.push(...res)
					console.log(this.imglist, 'this.images', res) //item.file.full_url
				})
			},
			//删除图片
			spliceimg(index) {
				this.images.splice(index, 1)
			},
			//删除详情图片
			contentspliceimg(index) {
				this.imglist.splice(index, 1)
			},
			//获取分类
			getcategoods(){
				this.$http({
					url:'api/Wechat/cateList'
				}).then(res=>{
					this.catelist = res.data
				})
			},
			handlemang(result){
				this.specificationFilter = JSON.parse(JSON.stringify(result));
			},
			
			async submit() {
				if(!this.goods_name||!this.category_id||!this.spec_type||!this.purchase_num){
					uni.showToast({
						title:'请完整信息',
						icon:'none'
					})
				}
				// const formData = JSON.parse(JSON.stringify(this.formData));
				console.log(this.formData, 'formData',this.specificationFilter)
				// if(formData.spec_type == 10&&!formData.block_ids&&this.formData.line_price){
				// 	this.$message('请选择要屏蔽的用户')
				// 	return
				// }
				console.log(this.formData, 'formData')
				this.formData.spec_type = this.spec_type
				if (this.spec_type == 20) {
					const specList = [];
					this.specificationFilter.forEach(item => {
						const specItem = {};
						specItem.key = item.id;
						specItem.spec_name = item.value;
						specItem.valueList = [];
						item.leaf.forEach(sitem => {
							specItem.valueList.push({
								key: sitem.id,
								groupKey: item.value,
								spec_value: sitem.value
							});
						});
						specList.push(specItem);
					});
					console.log(this.specificationFilter, 'this.specificationFilter',specList)
					// return
					const skuData = []
					this.specificationFilter.forEach((item,index)=>{
						item.leaf.forEach(sitem=>{
							skuData.push(sitem)
						})
						// skuData.push()
					})
					const skuList = [];
					console.log(skuData,'skuData')
			
					skuData.forEach((item,index) => {
						skuList.push({
							goods_price: item.goods_price,
							goods_sku_no: item.goods_sku_no,
							goods_weight: item.goods_weight,
							image_id: item.images ?
								item.images[0].id : 0,
							line_price: item.line_price,
							stock_num: item.stock_num,
							skuKeys: [],
							["spec_value_" + index]:item.value
						});
						// console.log(skuItem,'skuItem')
						// item.skus.forEach((sitem, sindex) => {
						// 	const pindex = specList.findIndex(
						// 		ssitem => ssitem.spec_name === sitem.k
						// 	);
						// 	const cindex = specList[pindex].valueList.findIndex(
						// 		ssitem => ssitem.spec_value === sitem.v
						// 	);
						// 	skuItem.skuKeys.push({
						// 		groupKey: pindex,
						// 		valueKey: cindex
						// 	});
							// skuItem["spec_value_" + index] = item.value;
						// });
						// skuList.push(skuItem);
					});
					console.log(skuData, 'skuData','skuList',skuList)
					this.formData.specData = {
						skuList: skuList,
						specList: specList
					};
					console.log(this.formData.specData, 'formData.specData,data')
				}
				this.formData.imagesIds = this.images.map(item => {
					return item.id;
				});
				this.formData.categoryIds = [this.category_id]
				this.formData.goods_name = this.goods_name
				this.formData.purchase_num = this.purchase_num
				this.formData.goods_price = this.goods_price
				this.formData.line_price = this.line_price
				this.formData.goods_weight = this.goods_weight 
				this.formData.stock_total = this.stock_total
				this.formData.stock_num = this.stock_total
				if(this.tag){
					this.formData.tags = this.tags.join(' ')
				}
				
				console.log(this.formData.imagesIds, 'formData.images',this.formData.categoryIds,'categoryIds',this.formData)
				await this.$http({
					url: "api/merch/addGoods",
					data: this.formData,
				}).then(res=>{
					uni.showToast({
						ttile:res.msg,
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.starimgbox {
		width: 690rpx;
		padding: 25rpx 30rpx;
		height: 268rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		opacity: 1;

		.uploadimg {
			width: 690rpx;
			height: 218rpx;
			border: 2rpx dashed #999999;
			text-align: center;
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #888888;

			image {
				width: 66rpx;
				height: 60rpx;
				margin: 50rpx 0 28rpx 0;
			}
		}
	}
	.imgbox {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	
		.imglist {
			width: 33.3%;
			text-align: center;
			position: relative;
	
			image {
				width: 208rpx;
				height: 208rpx;
			}
	
			.closen {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 10rpx;
				top: 0;
			}
		}
	}

	.frombox {
		width: 690rpx;
		padding: 0 30rpx;
		background: #FFFFFF;
		margin-top: 22rpx;

		.fromitem {
			display: flex;
			align-items: center;
			height: 106rpx;
			justify-content: space-between;
			border-bottom: #ECECEC solid 2rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #555555;

			>input {
				text-align: right;
			}

			.radiobox {
				display: flex;
				align-items: center;

				.radioitem {
					display: flex;
					align-items: center;
					width: 160rpx;

					image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}
				}
			}
		}
		.butont{
			display: flex;
			align-items: center;
			height: 106rpx;
			>view{
				width: fit-content;
				padding: 0 30rpx ;
				background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
				color: #FFF;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
			}
		}
	}
.butbox{
	width: 690rpx;
	height: 96rpx;
	background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	border-radius: 83rpx;
	text-align: center;
	margin: 50rpx auto;
	line-height:96rpx;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
}
</style>